<template>
  <a-spin :spinning="spinning">
    <a-card bordered title="权限管理">
      <a-form :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="角色名称">
          <a-input disabled v-model="role.name" />
        </a-form-item>
      </a-form>

      <a-tabs default-active-key="1" type="card">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="audit" />
            菜单权限
          </span>
          <menu-permission ref="menuPermission" :role="role"></menu-permission>
        </a-tab-pane>
        <a-tab-pane key="2" :forceRender="true">
          <span slot="tab">
            <a-icon type="block" />
            数据权限
          </span>
          <data-permission ref="dataPermission" :role="role"></data-permission>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <footer-tool-bar>
      <a-button icon="left-circle" @click="handleHidePermission">返回</a-button>
      <a-divider type="vertical" />
      <a-button type="primary" icon="check-circle" @click="handleSubmit"
        >保存</a-button
      >
    </footer-tool-bar>
  </a-spin>
</template>

<script>
import menuPermission from "./components/menuPermission.vue";
import dataPermission from "./components/dataPermission.vue";
import FooterToolBar from "@/components/footerToolbar";
import { addPermission } from "@/api/sys/permission/menuPermission";
export default {
  components: {
    menuPermission,
    dataPermission,
    FooterToolBar,
  },
  props: {
    role: {
      type: Object,
    },
  },
  data() {
    return {
      labelCol: { md: { span: 2 }, xs: { span: 24 }, sm: { span: 12 } },
      wrapperCol: { md: { span: 4 }, xs: { span: 24 }, sm: { span: 12 } },

      // 是否加载提示
      spinning: false,
    };
  },
  methods: {
    // 隐藏当前页面
    handleHidePermission() {
      this.$emit("handleHidePermission");
    },
    handleSubmit() {
      var saveData = Object.assign({
        roleId: this.role.id,
        menuPermissions: this.$refs.menuPermission.data,
        dataPermissions: this.$refs.dataPermission.data,
      });
      addPermission(saveData).then((res) => {
        if (res.code==200) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleCancel() {
      this.spinning = false;
    },
  },
};
</script>
